<template>
    <div class="iframe">
        <div class="i-title">
            <h3>钩子函数应用</h3>
        </div>
        <div class="i-tip">
            <el-input v-model="name" />
            <div class="i-tip">{{ name }}</div>
        </div>
    </div>
</template>
<script>
import { ref, onMounted, onUpdated } from "vue";
export default {
    setup() {
        // 定义变量
        let name = ref("张三");

        // 页面加载成功勾子函数
        onMounted(() => {
            name.value = "页面加载成功！";
        })

        // 页面更新成功勾子函数
        onUpdated(() => {
            console.log("更新中")
        })

        // 使用页面重新渲染一次
        return {
            name
        }
    }
}
</script>

